<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/ionicons.css">
  <link rel="stylesheet" href="./css/material-design-iconic-font.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/product.css">
  <title>商品详情</title>
</head>

<body>
  <!-- 导航栏 -->

  <head>
    <div class="nav_center">
      <div class="nav_logo_jpg">
        <img src="./img/logo.png" alt="" />
      </div>
      <div class="nav_menu">
        <a href="./index.html">商城首页</a>
        <a href="./shop_1.html">产品中心</a>
        <a href="#">促销中心</a>
        <a href="#">联系我们</a>
        <a href="#">关于我们</a>
        <span>
          <a href="./register.html">注册<span>/</span><a href="./login.html">登录</a></a>
        </span>
        <div class="sc_zmdi">

          <ul class="sc_zmdi_ioc">
            <div class="ipt">
              <input type="text" name="" id="" placeholder="输入搜索的商品">
            </div>
            <li><a href=""><i class="zmdi zmdi-search icon"></i></a></li>
            <li><a href=""><i class="zmdi zmdi-lock-outline icon"></i></a></li>
            <li><a href=""><i class="zmdi zmdi-shopping-cart-plus icon">
                  <div class="gw_ioc">2</div>
                </i></a></li>
          </ul>

        </div>
      </div>
    </div>
  </head>


  <!-- 黑色大图 -->
  <div class="bg">
    <div class="bg_black">
      <div>
        <div class="bg_text">
          <a href="./index.html">Home</a>
          /
          <span> Products</span>
          <h2>Account</h2>
        </div>
      </div>
    </div>
  </div>

  <!-- 商品详情主体部分 -->
  <div>
    <div class="products_center">

      <div class="products_img">
        <div class="swiper-container-fade img_d">
          <img src="./img/shop/product-single/1.jpg" alt="">

          <div>Sale</div>
          <div>-18%</div>

        </div>
        <div class="img_x">
          <a>
            <img src="./img/shop/product-single/nav1.jpg" alt="">
          </a>
          <a>
            <img src="./img/shop/product-single/nav3.jpg" alt="">
          </a>
          <a>
            <img src="./img/shop/product-single/nav4.jpg" alt="">
          </a>
          <a>
            <img src="./img/shop/product-single/nav5.jpg" alt="">
          </a>
        </div>
      </div>

      <div class="products_text">
        <div>
          <h4>Meta Slevless Dress</h4>
          <div>
            <p>$50.00</p>
            <span>$20.00</span>
          </div>
        </div>
        <ul>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star-o"></i></li>
          <li><span>( 1 Customer Review )</span></li>
        </ul>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est ad beatae similique vero dolorem blanditiis
          aliquam nobis, doloribus suscipit, perspiciatis corporis laborum ea soluta natus praesentium quasi! Ipsam,
          nihil deleniti!
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsum fuga assumenda ipsam cupiditate nam
        </p>
        <div class="products_input">
          <div>
            <span>Size</span>
            <select name="" id="">
              <option value="">S</option>
              <option value="">M</option>
              <option value="">L</option>
              <option value="">xL</option>
              <option value="">xxL</option>
            </select>
          </div>
          <div>
            <span>Color</span>
            <select name="" id="">
              <option value="">purple</option>
              <option value="">red</option>
              <option value="">black</option>
              <option value="">pink</option>
              <option value="">orange</option>
            </select>
          </div>
          <div>
            <span>Material</span>
            <select name="" id="">
              <option value="">metal</option>
              <option value="">resin</option>
              <option value="">leather</option>
              <option value="">slag</option>
              <option value="">fiber</option>
            </select>
          </div>
        </div>


        <div class="">
          <div class="products_gwc_btn" id="app">
            <input type="text" name="" id="" value="0">
            <div class="add">-</div>
            <div class="move">+</div>
          </div>
          <div class="gwc_btn_add">
            <button>Add to cart</button>
          </div>
          <div class="gws_btn_addto">
            <button>Add to wishlist</button>
          </div>
          <div class="guc_btn_buy">
            <button>BUY IT NOW</button>
          </div>
        </div>
        <div class="gwc_foot_ioc">
          <ul>
            <li><span>Share:</span></li>
            <li><i class="fa fa-facebook"></i></li>
            <li><i class="fa fa-twitter"></i></li>
            <li><i class="fa fa-pinterest"></i></li>
            <li><i class="fa fa-google-plus"></i></li>
          </ul>
        </div>
      </div>

    </div>
  </div>

  <script src="./vender/jquery-3.6.0.min.js"></script>
  <script src="./js/index.min.js"></script>
  <script src="./js/bootstrap.min 2.js"></script>
</body>
</body>

</html>